<template>
  <div>
      <span>值：{{count1}}</span><br/>
      <button @click="increate ">加</button>
      <button @click="deIncreate ">减</button>

  </div>
</template>

<script>
/* ========vue3的生命周期======== */

import {reactive,toRefs,onMounted,onUpdated, onRenderTracked, onRenderTriggered} from "vue"
export default {
    setup() {

        onMounted(()=> {
            console.log("onMounted.........")
        })
        onUpdated(()=> {
            console.log("onUpdated.........")
        })

        onRenderTracked((event)=> {
            console.log("onRenderTracked:",event)
        })
        onRenderTriggered((event)=> {
            console.log("onRenderTriggered:",event)
        })
        const data = reactive({
            count1: 0,
            increate: ()=> {data.count1 += 1},
            deIncreate: ()=> {data.count1 -= 1}
        })
        const refDatas = toRefs(data)
        return {
            ...refDatas
        }
    }
}
</script>

<style>

</style>